/**
 * React 中 ref 的三种方式：
 *
 *  前言：
 *      设置给普通元素，后续拿到的就是这个普通元素的DOM对象
 *      设置给组件，后续拿到的就是这个组件的实例对象
 *
 *  1. 字符串方式
 *      1. 设置 ref="xxx"
 *      2. 取值 this.refs.xxx
 *      特点：
 *        1. 不推荐，官网说它有性能问题。
 *
 *  2. 函数方式
 *      1. 设置 ref={(el) => { this.xxx = el }}
 *      2. 取值 this.xxx
 *      特点：
 *        1. 这个函数是个回调函数，是React执行的。
 *        2. 且会传递一个参数。这个参数的值取决于
 *            1. 普通元素上 ： el - 这个普通元素的DOM对象
 *            2. 组件元素上 ： el - 这个组件的实例对象
 *        3. 有个小问题，当 render 函数重新执行时，这个回调会被执行两次
 *            1. 第一次，是在做释放功能。传递过来的参数是 null
 *            2. 第二次，是在做重新绑定。传递过来的参数是正确的数据。
 *            解决方案：
 *                1. 不用管它。
 *                2. 不直接写这种内联的函数，而是抽出去。
 *      3. 特别关注：
 *          函数重新执行时，里面声明的函数都是一个全新的函数，上一次和这一次的是不一样的两个函数。
 *
 *          function render() {
 *            const a = {name: '1', age: 2}
 *          }
 *          render()  a
 *          render()  a
 *
 *  3. React.createRef API 的方式
 *      0. 先得到一个 Ref 对象
 *         React.createRef()  => Ref 对象
 *
 *         xxx = React.createRef()
 *      1. 设置 ref={this.xxx}
 *      2. 取值 this.xxx.current
 *      特点：
 *        1. 官网最推荐的写法
 */
